<script setup lang="ts">
import { ref } from 'vue';

import {
  Breadcrumb,
  Button,
  Card,
  DatePicker,
  Select,
  Table,
} from 'ant-design-vue';
import dayjs from 'dayjs';
import { DownloadIcon } from 'lucide-vue-next';

// 响应式数据
const selectedAccount = ref('1012');
const startDate = ref(dayjs('2025-01'));
const endDate = ref(dayjs('2025-01'));

// 科目选项
const accountOptions = [
  { value: '1012', label: '1012 其他货币资金' },
  { value: '1001', label: '1001 库存现金' },
  { value: '1002', label: '1002 银行存款' },
  { value: '1122', label: '1122 应收账款' },
  { value: '1123', label: '1123 预付账款' },
  { value: '1221', label: '1221 其他应收款' },
  { value: '1403', label: '1403 原材料' },
  { value: '1405', label: '1405 库存商品' },
];

// 表格列配置
const columns = [
  {
    title: '日期',
    dataIndex: 'date',
    key: 'date',
    width: 120,
    fixed: 'left',
  },
  {
    title: '凭证号',
    dataIndex: 'voucherNo',
    key: 'voucherNo',
    width: 120,
  },
  {
    title: '摘要',
    dataIndex: 'summary',
    key: 'summary',
    width: 200,
  },
  {
    title: '借方',
    dataIndex: 'debit',
    key: 'debit',
    width: 120,
    align: 'right',
  },
  {
    title: '贷方',
    dataIndex: 'credit',
    key: 'credit',
    width: 120,
    align: 'right',
  },
  {
    title: '方向',
    dataIndex: 'direction',
    key: 'direction',
    width: 80,
    align: 'center',
  },
  {
    title: '余额',
    dataIndex: 'balance',
    key: 'balance',
    width: 120,
    align: 'right',
  },
];

// 表格数据
const tableData = ref([
  {
    key: '1',
    date: '2025-01',
    voucherNo: '',
    summary: '期初余额',
    debit: '',
    credit: '',
    direction: '借',
    balance: '',
  },
  {
    key: '2',
    date: '2025-01',
    voucherNo: '',
    summary: '本月合计',
    debit: '',
    credit: '',
    direction: '借',
    balance: '',
  },
  {
    key: '3',
    date: '2025-01',
    voucherNo: '',
    summary: '本年累计',
    debit: '',
    credit: '',
    direction: '借',
    balance: '',
  },
]);

// 面包屑数据
const breadcrumbItems = [
  {
    title: '账簿',
  },
  {
    title: '多栏账',
  },
];

// 事件处理函数
const handleAccountChange = (value: string) => {
  selectedAccount.value = value;
};

const handleStartDateChange = (date: any) => {
  startDate.value = date;
};

const handleEndDateChange = (date: any) => {
  endDate.value = date;
};

const handleDownload = () => {
  // 下载逻辑
};

const handleBackToWorkbench = () => {
  // 返回工作台逻辑
};
</script>

<template>
  <div class="flex h-full flex-col">
    <!-- 页面顶部栏 -->
    <div class="border-b border-gray-200 bg-white px-6 py-4">
      <div class="flex items-center justify-between">
        <!-- 左侧公司名称 -->
        <div class="text-lg font-medium text-gray-900">
          北京神州源科技有限公司
        </div>

        <!-- 中间面包屑 -->
        <div class="flex flex-1 justify-center">
          <Breadcrumb :items="breadcrumbItems" />
        </div>

        <!-- 右侧操作区 -->
        <div class="flex items-center space-x-4">
          <Button type="primary" @click="handleBackToWorkbench">
            返回工作台
          </Button>
          <!-- 模拟已打开标签页 -->
          <div class="flex items-center space-x-2 text-sm text-gray-600">
            <span class="rounded bg-gray-100 px-2 py-1">科目余额表</span>
            <span class="rounded bg-gray-100 px-2 py-1">总账</span>
            <span class="rounded bg-gray-100 px-2 py-1">明细账</span>
            <span class="rounded bg-gray-100 px-2 py-1">辅助核算总账</span>
            <span class="rounded bg-gray-100 px-2 py-1">辅助核算明细账</span>
            <span class="rounded bg-blue-100 px-2 py-1 text-blue-600">
              多栏账
            </span>
          </div>
        </div>
      </div>
    </div>

    <!-- 主要内容区域 -->
    <div class="flex-1 bg-gray-50 p-6">
      <Card class="h-full">
        <!-- 筛选与查询区 -->
        <div class="mb-6 rounded-lg bg-gray-50 p-4">
          <div
            class="grid grid-cols-1 items-end gap-4 md:grid-cols-2 lg:grid-cols-4"
          >
            <!-- 科目选择 -->
            <div>
              <label class="mb-2 block text-sm font-medium text-gray-700">
                科目
              </label>
              <Select
                v-model:value="selectedAccount"
                placeholder="请选择科目"
                class="w-full"
                :options="accountOptions"
                @change="handleAccountChange"
              />
            </div>

            <!-- 会计期间 - 开始 -->
            <div>
              <label class="mb-2 block text-sm font-medium text-gray-700">
                会计期间
              </label>
              <DatePicker
                v-model:value="startDate"
                picker="month"
                format="YYYY-MM"
                placeholder="开始月份"
                class="w-full"
                @change="handleStartDateChange"
              />
            </div>

            <!-- 会计期间 - 结束 -->
            <div>
              <label class="mb-2 block text-sm font-medium text-gray-700">
                &nbsp;
              </label>
              <DatePicker
                v-model:value="endDate"
                picker="month"
                format="YYYY-MM"
                placeholder="结束月份"
                class="w-full"
                @change="handleEndDateChange"
              />
            </div>

            <!-- 操作按钮 -->
            <div class="flex space-x-2">
              <Button type="primary" @click="handleDownload">
                <template #icon>
                  <DownloadIcon class="h-4 w-4" />
                </template>
                下载
              </Button>
            </div>
          </div>
        </div>

        <!-- 多栏账表格 -->
        <div class="rounded-lg bg-white">
          <Table
            :columns="columns"
            :data-source="tableData"
            :pagination="false"
            :scroll="{ x: 800, y: 400 }"
            bordered
            size="small"
          >
            <template #emptyText>
              <div class="py-8 text-center text-gray-500">
                <div class="mb-2 text-4xl">📊</div>
                <div>暂无数据</div>
                <div class="mt-1 text-sm">
                  请选择科目和会计期间后查看多栏账数据
                </div>
              </div>
            </template>
          </Table>
        </div>
      </Card>
    </div>
  </div>
</template>

<style scoped>
/* 自定义样式 */
.ant-table-thead > tr > th {
  background-color: #fafafa;
  font-weight: 600;
}

.ant-table-tbody > tr:hover > td {
  background-color: #f5f5f5;
}

/* 表格数字列右对齐 */
.ant-table-cell[data-align='right'] {
  text-align: right;
}

/* 表格居中对齐 */
.ant-table-cell[data-align='center'] {
  text-align: center;
}

/* 面包屑样式 */
:deep(.ant-breadcrumb) {
  font-size: 16px;
}

:deep(.ant-breadcrumb-link) {
  color: #666;
}

:deep(.ant-breadcrumb-separator) {
  color: #999;
}

/* 特殊行样式 */
:deep(.ant-table-tbody > tr:first-child > td) {
  font-weight: 600;
  background-color: #f9f9f9;
}

:deep(.ant-table-tbody > tr:last-child > td) {
  font-weight: 600;
  background-color: #f0f8ff;
}

:deep(.ant-table-tbody > tr:nth-last-child(2) > td) {
  font-weight: 600;
  background-color: #f5f5f5;
}
</style>
